<template>
  <div class="zhuanjia" style="width=Width;height=Height;">
    <el-container>
      <!--  <el-header>
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span class="mingcheng1">
                天马行空
              </span>
              <span class="mingcheng2">
                志愿填报系统
              </span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="white">
                <el-menu-item index="1" @click="gohome()">主页</el-menu-item>
                <el-menu-item index="3" @click="gettwo()">院校查询</el-menu-item>
                <el-menu-item index="4" @click="getthree()">专业查询</el-menu-item>
                <el-menu-item index="2" @click="getone()">模拟填报</el-menu-item>
                <el-menu-item index="5">关于我们</el-menu-item>
              </el-menu>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple bg-purple1">
              <div class="demo-type" @click="tiaotiao()">
                <el-avatar :size="60" :src="UserInfo_url">
                </el-avatar>
                <span class="yonghuname">{{ UserName }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-header>  -->

      <!-- <el-header> -->
        <utabbar :tabactiv="2"></utabbar>
      </el-container>
      <!-- </el-header> -->
      <el-main class="bk">
        <div class="mainone">
          <div class="maintop">
            <el-form :model="form" class="demo-form-inline">
              院校名称<el-input v-model="form.SchoolName"></el-input>
              院校层次<el-input v-model="form.natureCategory"></el-input>
              办学类型<el-input v-model="form.SchoolType"></el-input>
              院校城市<el-input v-model="form.ProvinceCityName"></el-input>
              <el-form-item>
                <el-button type="primary" @click.prevent="onSubmit">查询</el-button>

              </el-form-item>
            </el-form>
          </div>
          <div class="mainbottom">
            <div class="queryschool">
              <el-table :data="tableData" 
              v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
     style="width: 100%" @click="goschoolinfo(scope.row.schoolCode,scope.row.schoolName)">
                <el-table-column prop="imgCode" label="院校图标" width="140" align="center" header-align="center">
                  <template v-slot="scope">
                    <img :src="$Fcee_url.url+'/SchoolImg/'+scope.row.schoolCode+'.jpg'" alt="" class="imgCode">
                  </template>
                </el-table-column>
                <el-table-column prop="schoolCode" label="院校代号" width="80" align="center" header-align="center">
                </el-table-column>
                <el-table-column prop="schoolName" label="院校名称" width="140" align="center" header-align="center">
                </el-table-column>
                <el-table-column prop="provinceCityName" label="省份" width="100" align="center" header-align="center">
                </el-table-column>
                <el-table-column prop="schoolType" label="办学类型" width="280" align="center" header-align="center">
                </el-table-column>
                <el-table-column prop="natureCategory" label="院校类型" width="192" align="center" header-align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button @click="goschoolinfo(scope.row.schoolCode,scope.row.schoolName)" type="text" size="small">查看</el-button>
                   
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage4" :page-sizes="pageSizes" :page-size="100"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>

      </el-main>
    
  </div>
</template>
<script>
import axios from 'axios';
import Vue from "vue";
import Fcee_url from "../js/fceeConfig";
import tabbar from "./fceecomponents/my-tabbar.vue"
import utabbar from "./fceecomponents/uitabbar.vue"
Vue.prototype.$Fcee_url = Fcee_url
export default {
  components:{
    tabbar,
    utabbar
  },
  data() {
    return {
      form: {
        SchoolName: '',
        ProvinceCityName: '',
        natureCategory: '',
        SchoolType: '',
      },
      total: 1,
      pageNum: 1,
      pageSizes: [10,20],
      tableData:'',
      UserInfo_url: '',
      UserName: '',
      Height:'',
      Width:"",
      loading: false
    }
  },
  methods: {
    
    handleCurrentChange(val) {//翻页
        console.log(`当前页: ${val}`);
        //
        this.pageNum=val;
        this.start1()


      },

    goschoolinfo(schoolCode,schoolName){
      console.log(schoolCode)
      console.log(schoolName)
      this.$router.push({
                path:'/schoolinfo',
                name:'schoolinfo',
                params:{
                 id : schoolCode,
                 name:schoolName
                }
              })
    },
    gohome() {
      this.$router.replace("/");
    },
    tiaotiao() {
      this.$router.replace("/yonghu");
    },
    getone() {
      this.$router.replace("/moni");
    },
    gettwo() {
      this.$router.replace("/zhuanjia");
    },
    getthree() {
      this.$router.replace("/zhuanye");
    },
    start1: function () {
      this.loading=true
      var SchoolName = this.form.SchoolName;
      var ProvinceCityName = this.form.ProvinceCityName;
      var natureCategory = this.form.natureCategory;
      var SchoolType = this.form.SchoolType;
      axios({
        method: "GET",
        url: "/school/seachSchool",
        params:{
          pageNum:this.pageNum,
          SchoolName:SchoolName,
          ProvinceCityName:ProvinceCityName,
          natureCategory:natureCategory,
          SchoolType:SchoolType,
        },
      }).then(response => {
        this.loading=false
        this.tableData=response.data.rows;
        // console.log(response.data.rows)
        this.total=response.data.total;
        // console.log(this.tableData);
        let array=this.tableData;
        array.forEach(function(item,index){
          // let imgCode=item.schoolCode;
          // item.push(item.schoolCode+'.jpg');
          item.imgCode=this.$Fcee_url.url+"/SchoolImg/"+item.schoolCode+'.jpg';
          
          // console.log(this.tableData)
        });
        
      })
    },
    start2:function(){
      axios({
           method:"GET",
           url:""
      })
    },
  
    open() {
      this.$confirm('此功能需要登录使用, 是否继续?', '提示', {
        confirmButtonText: '登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       this.$router.replace('/myVolunteer')
        this.$message({
          type: 'success',
          message: '即将前往登录界面!',

        });
      }).catch(() => {
        this.$router.go(-1)
        this.$message({
          type: 'info',
          message: '取消'
        });          
      });
    },
    info: function () {
      axios({
        method: "GET",
        url: "/userInfo",

      }).then(response => {
        // this.UserInfo = response.data.data;
        console.log(response)
        // alert(response.data.code)
        if(response.data.code==1){
          console.log("已登录")
          // alert("未登录")
          this.open()

        }else{
          // this.open4();
          // alert("未登录")
          this.$message({
          showClose: true,
          message: '用户已登录',
          type: 'success'
        });

        }

        this.UserName = this.UserInfo.username;
        this.UserInfo_url = this.$Fcee_url.url + this.UserInfo.Avatar;
        console.log("处理后" + this.UserInfo_url)

      })
    },
  
    yangshi:function(){
      let ww=window.innerWidth;
      console.log(ww);
      this.screenWith = window.innerWidth
      if(ww<=1014){
        this.zhuangtai=0;

      }else{
        this.zhuangtai=1;
      }
    },
   
    onSubmit(){
      this.start1();
          
      // console.log(this.from.SchoolName)
    },
  },
  mounted(){
      window.onresize=()=>{
        this.yangshi();
      }
  },
  created(){
      this.start1();
      // this.info();
      // this.getLogin();
      // console.log(1322);
      this.yangshi();
  }
}
</script>
<style>
/* .tr_point {
  position: absolute;
  left: 460px;
} */
*{
  padding: 0;
  margin: 0;
}
.zhuanjia {
  width: 100%;
  height: 100%;
  /* padding-left: 5%;
  padding-right: 5%; */
  background-color: #ffffff;
  margin: 0 auto;
}


/* .el-header {
  border-radius: 15px;
  margin-bottom: 30px;
} */

.bk{
  background-color: #ffffff;
}

.SchoolNameinput{
  position: absolute;
  right: 16rem;
}
.el-table__cell{}

.el-header,
.el-footer {
  background-color: white;
  color: #333;
  text-align: center;

  line-height: 60px;
}

.el-main{
    
  color: #333;
  text-align: center;
  line-height: 70px;
  padding: 0;
  margin-bottom: 30px;
  overflow: hidden
}
.maintop {
    background-color: white;
  height: 180px;
  margin-bottom: 140px;
  
}
@media only screen and (max-width:300) {
  .maintop {
    background-color: white;
  height: 180px;
  margin-bottom: 150px;
  
}
}
.el-input {
  width: 200px;
  margin-left: 5px;
  margin-top: 50px;
}
.mainfoot{
    background-color: white;
    width: 100%;
    /* height: 500px; */
}
.tiao{
    width: 5px;
    height: 30px;
    float: left;
    background-color: aqua;
}
.biaoti{
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    float: left;
}
.mingcheng1{
  font-size: 20px;
  font-weight: bolder;
  color: aqua;
}
.mingcheng2{
  font-size: 20px;
  color: rgb(128, 128, 128);
  font-weight: bolder;
}
.el-pagination{
  height: 15vh;
}
.el-pagination__jump{
  position: relative;
  bottom: 50px;
}
.el-pagination{
  margin-top: 60px;
}
/* .mainone {
  position: absolute;
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 70px;
  padding: 0;
  margin-bottom: 30px;
  overflow: hidden;
  display: block;
} */

/* .el-input {
  width: 200px;
  margin-left: 5px;
  margin-top: 50px;
} */

/* .maintop {
  height: 150px;

}

.queryschool {
  margin: 30px auto;
  width: auto;
  height: 90%;
} */



.imgCode {
  height: 70px;
  width: 70px;
}

/*  */
/* .maintwo {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 70px;
  padding: 0;
  margin-bottom: 30px;
  overflow: hidden;
  display: none;
} */
/*  */

/* tabbar{ */
/* position: absolute; */
/* left: 500px; */
/* } */
</style>
